﻿
<!DOCTYPE HTML>
<html>
<head>
  <title>Iran Game Center </title>
  <!-- stylesheets -->
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
        <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style1.css" type="text/css" media="screen"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
  <link href="css/light.css" rel="stylesheet" type="text/css" />
  <!-- modernizr enables HTML5 elements and feature detects -->
  <script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
   <style>
			
			span.reference{
				position:fixed;
				left:10px;
				bottom:10px;
				font-size:12px;
			}
			span.reference a{
				color:#aaa;
				text-transform:uppercase;
				text-decoration:none;
				text-shadow:1px 1px 1px #000;
				margin-right:30px;
			}
			span.reference a:hover{
				color:#ddd;
			}
			ul.sdt_menu{
				margin-top:150px;
			}
			h1.title{
				text-indent:-9000px;
				background:transparent url(title.png) no-repeat top left;
				width:633px;
				height:69px;
			}
		</style>
</head>

    <div id="main">
<header>
      
      <nav>
        <ul class="sf-menu" id="nav">
          <li><a href="index.php">خانه</a></li>          
        </ul>
      </nav>
	  <div id="logo"><h1>مرکز بازی های  <a href="#">آنلاین</a>ایران</h1></div>
    </header>
	<body>
	<center>
		<div class="content">
					<ul id="sdt_menu" class="sdt_menu">
		<?php
				$servername="localhost";
				$username="root";
				$pass = "Mazda1428";
				$conn=  mysql_connect($servername,$username,$pass)or die(mysql_error());
				mysql_select_db("irgc",$conn);
				$sql="select * from game";
				$result=mysql_query($sql,$conn) or die(mysql_error());
				$i = 1;
				
			
				while($row = mysql_fetch_array($result))
				{
					$query = "SELECT * FROM game WHERE id = ".$row['id'];
					$result8 = mysql_query($query,$conn) or die(mysql_error());
					$row8 = mysql_fetch_row($result8);
					$sql1="select * from user as p where p.id = ".$row['player1'] ;
				$result1=mysql_query($sql1,$conn) or die(mysql_error());
				$row1 = mysql_fetch_array($result1);
				$sql2="select * from user as l where l.id = ".$row['player2'] ;
				$result2=mysql_query($sql2,$conn) or die(mysql_error());
				$row2 = mysql_fetch_array($result2);
				$sql3="select * from user as l where l.id = ".$row['winner'] ;
				$result3=mysql_query($sql3,$conn) or die(mysql_error());
				$row3 = mysql_fetch_array($result3);
				if ($row['winner'] == 1){
				$win = $row1['username']; }
				else if ($row['winner'] == 2){
				$win = $row2['username']; }
				else if ($row['winner'] == 3){
				$win = "Equal"; }
				else if ($row['winner'] == 0){
				$win = "In Progress"; }
				echo ' <li>	'				;
						if ($row['sequence']=='') {
				echo	'<a href="watch.php?game_id=null">';}
						
						else {
					echo '<a href="watch.php?game_id='.$row['sequence'].'">';}
				echo	'
						<img src="images/'.$i.'.jpg" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span class="sdt_link">Game_ID : '.$row['id'].'</span>
							<span class="sdt_descr"> Winner : '.$win.'</span>
						</span>
					</a>
					<div class="sdt_box">
							<a href="#">Player 1 : '.$row1["username"].'</a>
							<a href="#">Player 2 : '.$row2["username"].'</a>
							<a href="#">Time : '.$row["time"].'</a>
							<a href="#">Date : '.$row["date"].'</a>
							<a href="#">TypeGame : '.$row["type"].'</a>
					</div>
				</li> ' ;
				$i++;
				}
				?>
				
			</ul>
		</div>
		     


        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
				/**
				* for each menu element, on mouseenter, 
				* we enlarge the image, and show both sdt_active span and 
				* sdt_wrap span. If the element has a sub menu (sdt_box),
				* then we slide it - if the element is the last one in the menu
				* we slide it to the left, otherwise to the right
				*/
                $('#sdt_menu > li').bind('mouseenter',function(){
					var $elem = $(this);
					$elem.find('img')
						 .stop(true)
						 .animate({
							'width':'170px',
							'height':'170px',
							'left':'0px'
						 },400,'easeOutBack')
						 .andSelf()
						 .find('.sdt_wrap')
					     .stop(true)
						 .animate({'top':'140px'},500,'easeOutBack')
						 .andSelf()
						 .find('.sdt_active')
					     .stop(true)
						 .animate({'height':'170px'},300,function(){
						var $sub_menu = $elem.find('.sdt_box');
						if($sub_menu.length){
							var left = '170px';
							if($elem.parent().children().length == $elem.index()+1)
								left = '-170px';
							$sub_menu.show().animate({'left':left},200);
						}	
					});
				}).bind('mouseleave',function(){
					var $elem = $(this);
					var $sub_menu = $elem.find('.sdt_box');
					if($sub_menu.length)
						$sub_menu.hide().css('left','0px');
					
					$elem.find('.sdt_active')
						 .stop(true)
						 .animate({'height':'0px'},300)
						 .andSelf().find('img')
						 .stop(true)
						 .animate({
							'width':'0px',
							'height':'0px',
							'left':'85px'},400)
						 .andSelf()
						 .find('.sdt_wrap')
						 .stop(true)
						 .animate({'top':'25px'},500);
				});
            });
        </script>
		</center>
    </body>
</div>

  <!-- initialise sooperfish menu -->
  <script type="text/javascript">
  </html>